import React, { VFC} from "react"
import { Form, Input, Button } from 'antd';
const FormItem = Form.Item;
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { login, getDic} from '@services/index'
import {useSetRecoilState} from 'recoil'
import {loginInfo} from '@atoms/atomsLoginInfo'

import './style.css'
const Login:VFC = () => {
    const setLoginInfoData = useSetRecoilState(loginInfo)
    const onFinish = async (values: any) => {
        values.clientType = 2; // 教师端
        const {status, data} =  await login(values)
        await getDicData()
        if(status === '0'){
            sessionStorage.userInfo = JSON.stringify(data);
            window.location.href = '/group'
            setLoginInfoData(data)
        }
    };
    // 获取字典项
    const getDicData = async () => {
        const {data, status} = await getDic();
        if(status === '0') {
            localStorage.DIC = JSON.stringify(data);
        }
    }
    return (
        <div className="login">
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{ remember: true }}
                onFinish={onFinish}
            >
                <p style={{textAlign:'center',paddingBottom:'10px',fontSize: '16px',fontWeight: 'bold'}}>登录</p>
                <FormItem name="loginName" rules={[{ required: true, message: '请输入你的通行证ID' }]} >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入你的通行证ID" />
                </FormItem>
                <FormItem name="password" rules={[{ required: true, message: '请输入你的密码' }]} >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="请输入你的密码"
                    />
                </FormItem>
                <FormItem>
                    <Button type="primary" htmlType="submit" style={{width:'100%'}}> 登录 </Button>
                    {/* 或 <a href="">去注册</a> */}
                </FormItem>
            </Form>
        </div>
    )
}
export default Login